<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>学历:</span>
        <select class="select" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option></option>
        </select>
        <span>专业:</span>
        <select class="select" v-model="subjectSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in subjectOption" :label="item.subject" :value="key"></option>
        </select>
        <div class="middle">
          <el-input placeholder="请输入教师姓名"  v-model="teaName" size="small" class="middle-text"></el-input>
          <el-button type="primary" v-on:click="nameSearch" size="small">搜索</el-button>
          <el-button type="primary" @click="clearGradeSelect" size="small">重置</el-button>
          <el-button type="primary" size="small">导出</el-button>
        </div>
      </div>
    </div>

    <div class="model query">
      <img :src="IMGBASE64.JIAOSHIXINXICHAXUN2X" class="pink">
      <span class="title">教师信息</span>
      <div class="kong"></div>
      <template>
        <el-table :data="tablemsg" style="width: 100%" @cell-click="showDetails">
          <el-table-column prop="id" label="#" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="idNo" label="身份证号" align="center" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="education" label="学历" align="center"></el-table-column>
          <el-table-column prop="university" label="毕业学校" align="center"></el-table-column>
          <el-table-column prop="major" label="专业" align="center"></el-table-column>
          <el-table-column prop="position" label="应聘岗位" align="center"></el-table-column>
          <el-table-column prop="schoolAge" label="教龄" align="center"></el-table-column>
          <el-table-column prop="titles" label="职称" align="center"></el-table-column>
          <el-table-column prop="phone" label="手机号" align="center" :show-overflow-tooltip='true'></el-table-column>
        </el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
      </template>
    </div>

    <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="close" class="close" @click="detailsShow()"></el-button>
      <div class="body">
        <el-form label-width="80px">
          <el-col :span="24">
            <el-form-item label="姓名">
              <span>{{detailsForm.name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <span>{{detailsForm.idNo}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历">
              <span>{{detailsForm.education}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="毕业学校">
              <span>{{detailsForm.university}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业">
              <span>{{detailsForm.major}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应聘岗位">
              <span>{{detailsForm.position}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="教龄">
              <span>{{detailsForm.schoolAge}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职称">
              <span>{{detailsForm.titles}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <span>{{detailsForm.phone}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isDetails"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      teaName: null,
      teacherData: [],
      gradeSelect: null,
      gradeOption: [],
      subjectSelect: null,
      subjectOption: [],
      isDetails: false,
      total: 0,
      page: 1,
      paging: true,
      detailsForm: {
        name: null,
        idNo: null,
        education: null,
        university: null,
        major: null,
        position: null,
        schoolAge: null,
        titles: null,
        phone: null
      },
      tablemsg: [
        {
          id: '1',
          name: '欧阳俊逸',
          IDcardNum: '44013401234021340234',
          qualifications: '本科',
          gradeSchool: '华南师范大学',
          want: '教师',
          career: '5年',
          job: '一级教师',
          phone: '123123123'
        },
        {
          id: '2',
          name: '欧阳俊逸',
          IDcardNum: '44013401234021340234',
          qualifications: '本科',
          gradeSchool: '华南师范大学',
          want: '教师',
          career: '5年',
          job: '一级教师',
          phone: '123123123'
        },
        {
          id: '3',
          name: '欧阳俊逸',
          IDcardNum: '44013401234021340234',
          qualifications: '本科',
          gradeSchool: '华南师范大学',
          want: '教师',
          career: '5年',
          job: '一级教师',
          phone: '123123123'
        }]
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      this.nameSearch()
    },
    detailsShow () {
      this.isDetails = !this.isDetails
    },
    showDetails (rows, column) {
      if (column.label !== '操作') {
        this.detailsForm.name = rows.name
        this.detailsForm.idNo = rows.idNo
        this.detailsForm.education = rows.education
        this.detailsForm.university = rows.university
        this.detailsForm.major = rows.major
        this.detailsForm.position = rows.position
        this.detailsForm.schoolAge = rows.schoolAge
        this.detailsForm.titles = rows.titles
        this.detailsForm.phone = rows.phone
        this.isDetails = !this.isDetails
      }
    },
    nameSearch () {
      this.xtoken = {'yxt-xtoken': localStorage.xtoken}
      this.$http.post(this._httpUrl + 'signup/teacherMsg/query', {name: this.teaName}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          // console.log(response.data.data)
          this.tablemsg = response.data.data.content
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    clearGradeSelect () {
      this.gradeSelect = null
      this.subjectSelect = null
      this.teaName = null
    },
    getGradeData () {
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getSubjectData () {
      this.$http.post(this._httpUrl + 'public/subject/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.subjectOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    }
  },
  mounted () {
    this.getGradeData()
    this.getSubjectData()
    this.xtoken = {'yxt-xtoken': localStorage.xtoken}
    this.$http.post('http://119.23.36.128:8020/yxt-web/signup/teacher/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        // console.log(response.data.data)
        this.tablemsg = response.data.data.content
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .retrieval{
    .body{
      span{
        margin-left: 4%;
      }
      span:first-child{
        margin-left: 0;
      }
    }
    .select{
      width: 13%;
      border: 0;
      border-bottom: 1px solid #D7D7D7;
    }
    .middle{
      width: 45%;
      display: inline-block;
      margin-left: 4%;
      &-text{
        width: 50%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
    }
    .right-btn{
      float: right;
      margin-right: 2%;
      a
      {
        text-decoration: none;
        color: white;
      }
    }
  }
</style>
